<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_747095_sq6s3ybwwmn.css"/>
		<style type="text/css">
			
			*{
				margin:0;
				padding:0;
			}
			body{
				background: gray;
			}
			.bigbox{
				min-width: 900px;
			}
			.box{
				box-shadow:2px 2px 5px #333333;
				width: 60%;
				margin: auto;
				
			}
			.box2{
				width: 60%;
				margin: auto;
				text-align: right;
				padding:5px;
				
				
			}
			.box3{
				background: white;
				width: 60%;
				margin:10px auto;
				position: relative;
			}
			.in_text{
				width: 100%;
				display: block;
				height: 200px;
				resize: none;
				border-radius: 5px;
			}
			.btn{
				background: red;
				color: white;
				border: none;
				width: 75px;
			    height: 32px;
			    font-size: 16px;
			    border-radius: 5px;
			}
			
			.tx{
				padding: 10px;
				display: inline-block;
				height: 104px;
				font-size: 0;
				width: 100px;
				border-radius: 50%;
			}
			.tx img{
				height: 100%;
				width: 100%;
			}
			p{	
				vertical-align: top;
				padding: 10px;
				padding-bottom: 50px;
				width: 70%;
				word-wrap:break-word;
				display: inline-block;
			}
			.good{
				cursor: pointer;
				font-size:25px;
				position: absolute;
				bottom:5%;
				left: 25%;
			}
			.del{
				font-size:20px;
				position: absolute;
				bottom:6%;
				left: 36%;
			}
			.Time{
				position: absolute;
				bottom: 7%;
				right: 3%;
			}
			.number{
				vertical-align: middle;
				font-size: 16px;
			}
			.fade-enter-active, .fade-leave-active {
			  transition: all 0.6s ease;
			}
			.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
			  opacity: 0;
			  transform: translateY(-100%);
			}
		</style>
	</head>
	<body>
		
		
		
		<div id="app">
			<box3 :msg="message" v-on:sendmsg="getmsg" v-on:delemsg="delebaba" v-on:goodmsg="goodbaba"></box3>
		</div>
		
		
		
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			
			Vue.component("box3",{
				template:`
					<div class="bigbox">
						<div class="box"> 
							<textarea class="in_text" v-model="msg.getdata"></textarea>
						</div>
						<div class="box2">
							<button class="btn" @click="send">发表</button>
						</div>
						<transition-group name="fade" tag="div" >
							<div class="box3" v-for="(item,index) in msg.messageArr" :key="item.listid">
								<div class="tx">
									<img src="img/tx2.png"/>
								</div>
								<p class="out_text">{{item.content}}</p>
								<i class="icon iconfont icon-iconfontzhizuobiaozhun44 good" @click="goods(index)"><span class="number">{{item.num}}</span></i>
								<i class="icon iconfont icon-shanchu del"  @click="dele(index)"></i>
								<span class="Time">{{item.time}}</span>
							</div>
						</transition-group>
					</div>
				`,
				
				props:["msg"],
				methods:{
					//发表按钮点击事件
					send:function(){
						//后面this.msg.getdata这个参数不明白什么意思
						
						this.$emit("sendmsg",this.msg.getdata);
						
						//发表后清空文本框
						this.msg.getdata="";
						console.log(this.msg.messageArr)
						
					},
					goods:function(index){
						
						this.$emit("goodmsg",index);
						
					},
					dele:function(index){
//						this.msg.messageArr.splice(index,1)
						this.$emit("delemsg",index);
					}
				}
			})
			
			
			
			var vue = new Vue({
				el:"#app",
				data:{
					message:{
						getdata:"",
						messageArr:[],
						time:""
					}
				},
				beforeMount:function(){
						var b=window.localStorage.getItem("name")
						
						if(b){
							this.message.messageArr=JSON.parse(localStorage.getItem("name"))
						}
				},
				
				methods:{
					
					getmsg:function(msg){
						//判断文本框是否有内容，没有无法发表
						if(this.message.getdata==""){
							alert("胖虎叫你输入内容");
						}else{
							
							var year = new Date().getFullYear();
							var month =new Date().getMonth()+1; 
							var dat = new Date().getDate();
							var hour = new Date().getHours();
							var min = new Date().getMinutes();
							if (min<10) {
								min = "0"+min;
							}
							
							
							this.message.time= (year+"年"+month+"月"+dat+"日"+""+hour+":"+min);
							
							this.message.messageArr.unshift({"listid":Math.floor(new Date()),"content":this.message.getdata,"num":0,"time":this.message.time});
//							debugger
							window.localStorage.setItem("name",JSON.stringify(this.message.messageArr));
							console.log(this.message);
							console.log(this.message.messageArr);
							
						}
						
						
						
					},
					delebaba:function(index){
						var delelist=this.message.messageArr.splice(index,1)
						window.localStorage.setItem("name",JSON.stringify(this.message.messageArr));
						
					},
					
					goodbaba:function(index){
						(this.message.messageArr[index].num)++;
						window.localStorage.setItem("name",JSON.stringify(this.message.messageArr));
					}
					
					
					
						
				}
				
			})
			
			
			
			
			
		</script>
		
	</body>
</html>
